<template>
  <div class="box">
    <div class="form">

      <el-form ref="form" :model="form">

        <el-row :gutter="20">
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item label="员工账号:" label-width="110px">
              <el-input v-model="form.employeeNumber" style="width:280px;" placeholder="请输入司机账号" />
            </el-form-item>
          </div>
          </el-col>
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item label="员工姓名:">
              <el-input v-model="form.name" style="width:280px;" placeholder="请输入司机姓名" />
            </el-form-item>
          </div>
          </el-col>
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item label="工作模式:">
              <!-- <el-input v-model="form.workPatternId" style="width:280px;" placeholder="请输入司机手机" /> -->
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  class="organization"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </el-form-item>
          </div>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item label-width="110px" label="月份：">
              <template>
                <div class="block">
                  <el-date-picker
                    v-model="form.month"
                    type="month"
                    style="width:280px;"
                    placeholder="选择月份"
                  />
                </div>
              </template>
              <!-- <el-input v-if="show===true" v-model="drivingForm.initialCertificateDate" style="width:200px" /> -->
            </el-form-item>

          </div>
          </el-col>

          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item label="所属机构:">
              <el-select
                ref="select"
                value=""
                style="width:280px;"
                :placeholder="valu?valu:`请选择所属机构`"
              >
                <el-option value="valu">
                  <el-tree
                    :data="list"
                    :props="defaultProps"
                    :check-on-click-node="true"
                    @node-click="handleNodeClick"
                  />
                </el-option>
              </el-select>
            </el-form-item>

          </div>
          </el-col>
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item>
              <el-button type="primary" @click="search">搜索</el-button>
              <el-button @click="reset">重置</el-button>
            </el-form-item>
          </div>
          </el-col>
        </el-row>

      </el-form>
    </div>

    <!-- 列表 -->
    <div class="table">
      <el-button type="primary" @click="$router.push(`/branches/WorkArrangeSetting`)">排班设置</el-button>
      <el-button type="primary" plain @click="binding">绑定排班</el-button>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        @select="select"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          prop="employeeNumber"
          label="员工账号"
          width="130"
          fixed="left"
        />
        <el-table-column
          prop="name"
          label="员工姓名"
          width="130"
          fixed="left"
        />
        <el-table-column
          prop="phone"
          label="员工电话"
          width="130"
          fixed="left"
        />
        <el-table-column
          prop="userType"
          label="员工角色"
          width="130"
          fixed="left"
        >
          <template v-slot="{ row }">
            <span v-if="row.userType === 1">员工</span>
            <span v-else-if="row.userType === 2">快递员</span>
            <span v-else-if="row.userType === 3">司机</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="workPatternName"
          label="当前工作模式"
          width="130"
          fixed="left"
        >
          <!-- <template v-slot="{ row }">
            <span>{{ row.workPattern }}</span>
            <span v-if="row.workSchedules[index] === false">休</span>
          </template> -->
        </el-table-column>
        <el-table-column
          v-for="(ele,index) in 30"
          :key="ele"
          prop="workSchedules[index]"
          :label="`${index+1}`"
          width="100"
        >
          <template v-slot="{ row }">
            <span v-if="row.workSchedules[index] === true">上</span>
            <span v-if="row.workSchedules[index] === false">休</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="foot">
      <el-pagination
        :page-size="+form.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="+form.page"
        :total="+total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisibleList"
      width="30%"
      :before-close="handleClose"
    >
      <div class="dialog-top">
        <el-radio v-model="radio" label="1">备选项</el-radio>
        <el-radio v-model="radio" label="2">备选项</el-radio>
      </div>

      <div class="dialog-top" style="margin-top: 20px;">
        <span>模式名称：</span>
        <el-select v-model="valueId" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            class="organization"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleList = false">取 消</el-button>
        <el-button type="primary" @click="sendwith">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { workSchedulings, workPatternsAll, bathWorkPatterns } from '@/api/branches'
import { replaceKeyNameWithLabelInArray } from '@/utils/index'
import { getManagerTree } from '@/api/essential'
export default {
  data() {
    return {
      valueId: '',
      radio: '',
      valu: '',
      form: {
        agencyId: '',
        employeeNumber: '',
        month: '',
        name: '',
        page: '1',
        pageSize: '10',
        userType: '',
        workPatternId: ''

      },
      tableData: [],
      total: 0,
      list: [],
      dialogVisibleList: false,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      value: '',
      dataList: [],
      options: []
      // workPattern: []
    }
  },
  async created() {
    this.workSchedulings()
    console.log(this.tableData)

    const res = await getManagerTree()
    const arr = JSON.parse(res.data)

    this.list = replaceKeyNameWithLabelInArray(arr)
    console.log(this.list)

    const res1 = await workPatternsAll()
    console.log(res1.data)
    // res.data
    this.options = res1.data[1]
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
      this.valu = data.label
      this.form.agentId = data.id
      this.$refs.select.blur()
    },
    handleSizeChange(val) {
      this.form.pageSize = val
      this.workSchedulings()
    },
    handleCurrentChange(val) {
      this.form.page = val
      this.workSchedulings()
    },
    async workSchedulings() {
      const res = await workSchedulings(this.form)
      console.log(res)
      this.tableData = res.data.items
      this.total = res.data.counts
    },
    search() {
      this.workSchedulings()
    },
    reset() {
      // this.$refs.form.resetFields()
      this.workSchedulings()
      this.form.agencyId = ''
      this.form.employeeNumber = ''
      this.form.month = ''
      this.form.name = ''
      this.form.page = '1'
      this.form.pageSize = '10'
      this.form.userType = ''
      this.form.workPatternId = ''
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    select(selection, row) {
      console.log(selection, row)
      for (let i = 0; i < selection.length; i++) {
        this.dataList.push(selection[i].id)
      }
      // this.dataList = selection
    },
    async binding() {
      if (this.dataList.length === 0) {
        this.$message.error('请选择')
      } else {
        this.dialogVisibleList = true
      }
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    async sendwith() {
      const res = await bathWorkPatterns({ userIdList: this.dataList, userType: '', workPatternId: this.valueId, workPatternType: '' })
      console.log(res)
      this.workSchedulings()
      this.dialogVisibleList = false
    }
  }
}
</script>

<style>
.box{
  padding: 15px 20px;
}

.form{
  background-color: white;
  padding: 15px 20px;
}
.table{
  margin-top: 20px;
  background-color: white;
  padding: 20px 20px;
}
.foot{
   display:flex;
  justify-content: center;
}
.dialog-top{
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-select-dropdown__item{
  height: 200px;
}
.organization{
  height: 50px;
}
</style>
